<template>
  <div class="popup_container" v-if="visible" :style="(left ? ('left:' + left + ';') : '') + (width ? ('width:' + width + ';') : '')" @click.stop="returnFalse">
    <div class="pop_header">      
      <slot name="title">
        <span class="title">{{ title }}</span>
      </slot>
      <div class="opbtn"><el-button class="f24 font-gray" type="text" v-if="icon" :icon="icon" circle size="mini" @click.stop="close"></el-button></div>
    </div>
    <div class="pop_content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
  export default {
    name:'popup',
    props: ['visible', 'left', 'width', 'title', 'icon'],
    methods: {
      close () {
        this.$emit('close')
      },
      returnFalse () {
        return false
      }
    }
  }
</script>
<style scoped lang="scss">
  .popup_container {
    position:fixed;
    top: 60px;
    bottom:0px;right:0px;
    background-color:#fff;

  }
  .popup_container:after{
    content: " ";
    height: 100%;
    position: absolute;
    top: 0px;
    left: -5px;
    width: 5px;
    background: linear-gradient(270deg,rgba(197,197,197,.8),rgba(211,211,211,.3));
    z-index: 1;
  }
  .pop_header {
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    position: absolute;
    top: 0px;right:0px;left:0px;
    z-index: 3;
  }
  .pop_header .opbtn {width:40px;height:40px;line-height:50px;position:absolute;top:5px;left:5px;text-align:center;}
  .pop_header .title {font-size: 18px;font-weight:400;color:#555;display:inline-block;padding: 0 6px 0px 60px; position:relative;;}
  .pop_header .title:after{content: '';position:absolute;height:2px;width:100%;bottom:0px; background-color:#efefef;left:0;right:0;}
  .pop_content{
    position: absolute;
    top: 60px;left:0px;right:0px;bottom:0px;
    overflow:auto;
    padding: 30px 20px;
  }
</style>
